{% extends 'userapp/master.html' %}
{% load static %}
{% block content %}

<!-- Page Header Start -->
<div class="container-fluid py-2">
    <h1 class="display-3 text-uppercase text-white mb-5">Bicycle Listing</h1>
    
</div>

<!-- Page Header Start -->


<!-- Rent A Car Start -->
<div class="container-fluid py-0">
    <div class="container pt-2 pb-3">
        <h1 class="display-4 text-uppercase text-center mb-5">Select Your Station</h1>
        <div class="row">
            {% for i in station %}
            <div class="col-lg-4 col-md-6 mb-2">
                <div class="px-5 bg-secondary d-flex flex-column align-items-center justify-content-center"
                    style="height: 400px;">
                    <div class="text-right d-flex flex-column align-items-center mt-3">
                        <h3 class="text-uppercase text-light mb-3">{{i.name}}</h3>
                        <a class="btn btn-primary py-2 px-4" href="{% url 'bikedetails' i.id %}">Select</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<!-- Rent A Car End -->

{% endblock %}